<template>
  <view class="search-bar" @click="handleClick">
    <view class="search-box">
      <uni-icons type="search" size="18" color="#999" />
      <text class="placeholder">搜索商品名称</text>
    </view>
  </view>
</template>

<script setup>
const emit = defineEmits(['clickSearch'])

const handleClick = () => {
  emit('clickSearch')
}
</script>

<style lang="scss" scoped>
.search-bar {
  padding: 20rpx;
  background-color: #fff;
  
  .search-box {
    height: 70rpx;
    background-color: #f5f5f5;
    border-radius: 35rpx;
    display: flex;
    align-items: center;
    justify-content: center;
    
    .placeholder {
      color: #999;
      font-size: 28rpx;
      margin-left: 10rpx;
    }
  }
}
</style>
